<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信访分析系统 - 重点问题分析</title>
    <script src="./static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="./static/vendor/css/font-awesome-6.4.0.all.min.css">
    <script src="./static/vendor/js/chart-4.5.0.js"></script>
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8fafc;
        }

        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 侧边栏动画 */
        .sidebar {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-collapsed {
            width: 64px !important;
        }
        .sidebar-expanded {
            width: 15% !important;
        }

        /* 文本淡入淡出 */
        .fade-text {
            transition: opacity 0.3s ease-in-out;
        }
        .fade-text.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* 导航菜单项 */
        .nav-item {
            transition: all 0.3s ease;
            position: relative;
        }
        .nav-item::after {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 0;
            background: var(--primary-gradient);
            border-radius: 0 2px 2px 0;
            transition: height 0.3s ease;
        }
        .nav-item:hover::after,
        .nav-item.active::after {
            height: 70%;
        }
        .nav-item:hover {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
        }
        .nav-item.active {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, transparent 100%);
            color: #667eea;
        }

        /* 图表容器 */
        .chart-container {
            position: relative;
            height: 350px;
        }

        /* 分析类型切换按钮 */
        .analysis-type {
            transition: all 0.3s ease;
        }
        .analysis-type.active {
            background: var(--primary-gradient);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        /* 问题记录卡片 */
        .issue-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .issue-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        /* 详情模态框 */
        .modal {
            transition: all 0.3s ease;
        }
        .modal.show {
            opacity: 1;
            pointer-events: all;
        }
        .modal.hide {
            opacity: 0;
            pointer-events: none;
        }

        /* 标签样式 */
        .tag {
            transition: all 0.2s ease;
        }
        .tag:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body class="bg-slate-50">
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧边栏 -->
        <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-xl border-r border-slate-200 flex flex-col">
            <!-- 应用标题 -->
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
                            <i class="fas fa-file-contract text-white text-lg"></i>
                        </div>
                        <div class="fade-text">
                            <h1 class="font-bold text-xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">信访分析系统</h1>
                            <p class="text-xs text-slate-500">智能分析平台</p>
                        </div>
                    </div>
                    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-bars text-slate-600"></i>
                    </button>
                </div>
            </div>

            <!-- 导航菜单 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar">
                <nav class="p-4">
                    <ul class="space-y-2">
                        <li>
                            <a href="dashboard.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-dashboard text-lg"></i>
                                <span class="fade-text font-medium">仪表盘</span>
                            </a>
                        </li>
                        <li>
                            <a href="analysis-results.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-search text-lg"></i>
                                <span class="fade-text font-medium">分析结果</span>
                            </a>
                        </li>
                        <li>
                            <a href="petition-statistics.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-chart-bar text-lg"></i>
                                <span class="fade-text font-medium">信访件统计</span>
                            </a>
                        </li>
                        <li>
                            <a href="regional-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map text-lg"></i>
                                <span class="fade-text font-medium">区域分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="coordinate-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map-marker-alt text-lg"></i>
                                <span class="fade-text font-medium">经纬度分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="key-issues.html" class="nav-item active flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-exclamation-triangle text-lg"></i>
                                <span class="fade-text font-medium">重点问题分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="report-generation.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-file-alt text-lg"></i>
                                <span class="fade-text font-medium">生成报告</span>
                            </a>
                        </li>
                        
                        <!-- 管理员功能 -->
                        <li class="pt-4 mt-4 border-t border-slate-200">
                            <p class="fade-text text-xs text-slate-500 font-semibold px-4 mb-2">管理员功能</p>
                        </li>
                        <li>
                            <a href="ai-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-robot text-lg"></i>
                                <span class="fade-text font-medium">AI分析功能</span>
                            </a>
                        </li>
                        <li>
                            <a href="system-settings.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-cog text-lg"></i>
                                <span class="fade-text font-medium">系统设置</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- 用户信息 -->
            <div class="p-4 border-t border-slate-200">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center shadow-lg">
                        <i class="fas fa-user text-white text-lg"></i>
                    </div>
                    <div class="fade-text flex-1">
                        <p class="font-semibold text-slate-800">管理员</p>
                        <p class="text-xs text-slate-500">admin@example.com</p>
                    </div>
                    <div class="relative">
                        <button id="userMenuBtn" class="fade-text p-2 rounded-lg hover:bg-slate-100 transition-colors">
                            <i class="fas fa-chevron-down text-slate-600"></i>
                        </button>
                        <!-- 下拉菜单 -->
                        <div id="userMenu" class="hidden absolute right-0 bottom-full mb-2 w-48 bg-white rounded-lg shadow-lg border border-slate-200">
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-t-lg">
                                <i class="fas fa-user-circle mr-2"></i>个人中心
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100">
                                <i class="fas fa-cog mr-2"></i>账户设置
                            </a>
                            <hr class="my-1 border-slate-200">
                            <a href="login.html" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-b-lg">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部栏 -->
            <header class="bg-white border-b border-slate-200 px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold text-slate-800">重点问题分析</h2>
                        <p class="text-sm text-slate-500">识别和分析重复投诉及污染类型热点问题</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                            <i class="fas fa-download mr-2"></i>导出报告
                        </button>
                    </div>
                </div>
            </header>

            <!-- 滚动内容区 -->
            <main class="flex-1 overflow-y-auto custom-scrollbar p-6">
                <!-- 筛选条件 -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
                    <h3 class="text-lg font-semibold text-slate-800 mb-4">分析条件</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <!-- 任务结果选择 -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">选择任务结果</label>
                            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <option>全部任务结果</option>
                                <option>任务一 - 2024年1月分析</option>
                                <option>任务二 - 2023年12月分析</option>
                                <option>任务三 - 2023年11月分析</option>
                            </select>
                        </div>

                        <!-- 时间范围 -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">时间范围</label>
                            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <option>最近7天</option>
                                <option>最近30天</option>
                                <option>最近90天</option>
                                <option>自定义范围</option>
                            </select>
                        </div>

                        <!-- 区域筛选 -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">区域</label>
                            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <option>全部区域</option>
                                <option>福田区</option>
                                <option>罗湖区</option>
                                <option>南山区</option>
                                <option>宝安区</option>
                                <option>龙岗区</option>
                                <option>盐田区</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex justify-end mt-4">
                        <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                            <i class="fas fa-search mr-2"></i>开始分析
                        </button>
                    </div>
                </div>

                <!-- 统计概览 -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                    <div class="bg-gradient-to-br from-red-500 to-red-600 rounded-xl p-6 text-white">
                        <div class="flex items-center justify-between mb-4">
                            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-exclamation-triangle text-2xl"></i>
                            </div>
                            <span class="text-3xl font-bold">45</span>
                        </div>
                        <p class="text-red-100">重复投诉问题</p>
                        <p class="text-xs text-red-200 mt-2">
                            较上月增长 15%
                        </p>
                    </div>

                    <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-6 text-white">
                        <div class="flex items-center justify-between mb-4">
                            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-industry text-2xl"></i>
                            </div>
                            <span class="text-3xl font-bold">12</span>
                        </div>
                        <p class="text-orange-100">重点污染区域</p>
                        <p class="text-xs text-orange-200 mt-2">
                            需要重点关注
                        </p>
                    </div>

                    <div class="bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl p-6 text-white">
                        <div class="flex items-center justify-between mb-4">
                            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-percentage text-2xl"></i>
                            </div>
                            <span class="text-3xl font-bold">23%</span>
                        </div>
                        <p class="text-yellow-100">重复投诉率</p>
                        <p class="text-xs text-yellow-200 mt-2">
                            高于平均水平
                        </p>
                    </div>

                    <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-6 text-white">
                        <div class="flex items-center justify-between mb-4">
                            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-clock text-2xl"></i>
                            </div>
                            <span class="text-3xl font-bold">8.5</span>
                        </div>
                        <p class="text-purple-100">平均处理天数</p>
                        <p class="text-xs text-purple-200 mt-2">
                            较标准延长 2天
                        </p>
                    </div>
                </div>

                <!-- 分析类型切换 -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-slate-800">统计分析</h3>
                        <div class="flex space-x-2">
                            <button class="analysis-type active px-4 py-2 rounded-lg border border-slate-300">
                                <i class="fas fa-redo mr-2"></i>重复投诉
                            </button>
                            <button class="analysis-type px-4 py-2 rounded-lg border border-slate-300">
                                <i class="fas fa-smog mr-2"></i>污染类型
                            </button>
                        </div>
                    </div>

                    <!-- 统计图表 -->
                    <div class="chart-container">
                        <canvas id="issuesChart"></canvas>
                    </div>
                </div>

                <!-- 重点问题记录 -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-slate-800">重点问题记录</h3>
                        <div class="flex items-center space-x-4">
                            <input type="text" placeholder="搜索问题..." class="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            <select class="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <option>按时间排序</option>
                                <option>按重复次数排序</option>
                                <option>按严重程度排序</option>
                            </select>
                        </div>
                    </div>

                    <!-- 问题列表 -->
                    <div class="space-y-4" id="issuesList">
                        <!-- 重复投诉问题 -->
                        <div class="issue-card border border-slate-200 rounded-lg p-4" data-type="repeat">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center space-x-3 mb-2">
                                        <h4 class="font-semibold text-slate-800">福田区梅林街道工厂废气排放问题</h4>
                                        <span class="tag px-3 py-1 bg-red-100 text-red-700 text-sm rounded-full">
                                            <i class="fas fa-redo mr-1"></i>重复投诉
                                        </span>
                                        <span class="tag px-3 py-1 bg-orange-100 text-orange-700 text-sm rounded-full">
                                            高频
                                        </span>
                                    </div>
                                    <p class="text-sm text-slate-600 mb-3">该工厂因废气排放问题已被投诉12次，主要涉及二氧化硫、氮氧化物超标排放，影响周边居民健康。</p>
                                    <div class="flex items-center space-x-6 text-sm text-slate-500">
                                        <span><i class="fas fa-map-marker-alt mr-1"></i>福田区梅林街道</span>
                                        <span><i class="fas fa-calendar mr-1"></i>首次投诉：2023-10-15</span>
                                        <span><i class="fas fa-redo mr-1"></i>重复次数：12次</span>
                                        <span><i class="fas fa-exclamation-circle mr-1"></i>严重程度：严重</span>
                                    </div>
                                </div>
                                <button class="view-details ml-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                    查看详情
                                </button>
                            </div>
                        </div>

                        <!-- 污染类型问题 -->
                        <div class="issue-card border border-slate-200 rounded-lg p-4 hidden" data-type="pollution">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center space-x-3 mb-2">
                                        <h4 class="font-semibold text-slate-800">南山区空气污染聚集区</h4>
                                        <span class="tag px-3 py-1 bg-blue-100 text-blue-700 text-sm rounded-full">
                                            <i class="fas fa-smog mr-1"></i>空气污染
                                        </span>
                                        <span class="tag px-3 py-1 bg-purple-100 text-purple-700 text-sm rounded-full">
                                            区域性
                                        </span>
                                    </div>
                                    <p class="text-sm text-slate-600 mb-3">南山区科技园周边PM2.5、PM10持续超标，涉及23个相关投诉，主要来源于工业排放和机动车尾气。</p>
                                    <div class="flex items-center space-x-6 text-sm text-slate-500">
                                        <span><i class="fas fa-map-marker-alt mr-1"></i>南山区科技园</span>
                                        <span><i class="fas fa-chart-line mr-1"></i>影响范围：5平方公里</span>
                                        <span><i class="fas fa-file-alt mr-1"></i>相关投诉：23件</span>
                                        <span><i class="fas fa-thermometer-three-quarters mr-1"></i>污染等级：中度</span>
                                    </div>
                                </div>
                                <button class="view-details ml-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                    查看详情
                                </button>
                            </div>
                        </div>

                        <div class="issue-card border border-slate-200 rounded-lg p-4" data-type="repeat">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center space-x-3 mb-2">
                                        <h4 class="font-semibold text-slate-800">罗湖区东门街道噪音扰民问题</h4>
                                        <span class="tag px-3 py-1 bg-red-100 text-red-700 text-sm rounded-full">
                                            <i class="fas fa-redo mr-1"></i>重复投诉
                                        </span>
                                        <span class="tag px-3 py-1 bg-yellow-100 text-yellow-700 text-sm rounded-full">
                                            中频
                                        </span>
                                    </div>
                                    <p class="text-sm text-slate-600 mb-3">夜间施工噪音问题持续存在，周边居民投诉8次，主要涉及建筑工程夜间违规施工。</p>
                                    <div class="flex items-center space-x-6 text-sm text-slate-500">
                                        <span><i class="fas fa-map-marker-alt mr-1"></i>罗湖区东门街道</span>
                                        <span><i class="fas fa-calendar mr-1"></i>首次投诉：2023-11-02</span>
                                        <span><i class="fas fa-redo mr-1"></i>重复次数：8次</span>
                                        <span><i class="fas fa-exclamation-circle mr-1"></i>严重程度：中等</span>
                                    </div>
                                </div>
                                <button class="view-details ml-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                    查看详情
                                </button>
                            </div>
                        </div>

                        <div class="issue-card border border-slate-200 rounded-lg p-4" data-type="repeat">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center space-x-3 mb-2">
                                        <h4 class="font-semibold text-slate-800">宝安区西乡河流水质污染</h4>
                                        <span class="tag px-3 py-1 bg-red-100 text-red-700 text-sm rounded-full">
                                            <i class="fas fa-redo mr-1"></i>重复投诉
                                        </span>
                                        <span class="tag px-3 py-1 bg-red-100 text-red-700 text-sm rounded-full">
                                            紧急
                                        </span>
                                    </div>
                                    <p class="text-sm text-slate-600 mb-3">西乡河出现大量油污和垃圾，水质发黑发臭，已被投诉15次，严重影响周边生态环境。</p>
                                    <div class="flex items-center space-x-6 text-sm text-slate-500">
                                        <span><i class="fas fa-map-marker-alt mr-1"></i>宝安区西乡街道</span>
                                        <span><i class="fas fa-calendar mr-1"></i>首次投诉：2023-09-20</span>
                                        <span><i class="fas fa-redo mr-1"></i>重复次数：15次</span>
                                        <span><i class="fas fa-exclamation-circle mr-1"></i>严重程度：严重</span>
                                    </div>
                                </div>
                                <button class="view-details ml-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 详情模态框 -->
    <div id="detailsModal" class="modal hide fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-2xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-xl font-bold text-slate-800">问题详情</h3>
                    <button id="closeModal" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-times text-slate-600"></i>
                    </button>
                </div>
            </div>
            
            <div class="p-6 overflow-y-auto max-h-[calc(90vh-200px)]">
                <!-- 基本信息 -->
                <div class="mb-6">
                    <h4 class="font-semibold text-slate-800 mb-3">基本信息</h4>
                    <div class="grid grid-cols-2 gap-4 text-sm">
                        <div>
                            <p class="text-slate-500">问题编号</p>
                            <p class="font-medium">#XF20240115001</p>
                        </div>
                        <div>
                            <p class="text-slate-500">问题类型</p>
                            <p class="font-medium">重复投诉 - 环境污染</p>
                        </div>
                        <div>
                            <p class="text-slate-500">所在区域</p>
                            <p class="font-medium">福田区梅林街道</p>
                        </div>
                        <div>
                            <p class="text-slate-500">首次投诉时间</p>
                            <p class="font-medium">2023-10-15 14:30</p>
                        </div>
                    </div>
                </div>

                <!-- 投诉详情 -->
                <div class="mb-6">
                    <h4 class="font-semibold text-slate-800 mb-3">投诉内容</h4>
                    <div class="bg-slate-50 rounded-lg p-4">
                        <p class="text-sm text-slate-700 leading-relaxed">
                            深圳市福田区梅林街道某工厂长期排放刺鼻废气，严重影响周边居民生活。废气主要在夜间排放，气味难闻，导致居民出现头晕、恶心等症状。经检测，二氧化硫、氮氧化物等指标严重超标。
                        </p>
                    </div>
                </div>

                <!-- 重复投诉记录 -->
                <div class="mb-6">
                    <h4 class="font-semibold text-slate-800 mb-3">重复投诉记录</h4>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
                            <div class="flex items-center space-x-3">
                                <div class="w-2 h-2 bg-red-500 rounded-full"></div>
                                <div>
                                    <p class="text-sm font-medium">第12次投诉</p>
                                    <p class="text-xs text-slate-500">2024-01-15 09:20</p>
                                </div>
                            </div>
                            <span class="text-sm text-red-600">待处理</span>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg">
                            <div class="flex items-center space-x-3">
                                <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
                                <div>
                                    <p class="text-sm font-medium">第11次投诉</p>
                                    <p class="text-xs text-slate-500">2024-01-10 16:45</p>
                                </div>
                            </div>
                            <span class="text-sm text-yellow-600">处理中</span>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                            <div class="flex items-center space-x-3">
                                <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                                <div>
                                    <p class="text-sm font-medium">第10次投诉</p>
                                    <p class="text-xs text-slate-500">2024-01-05 11:30</p>
                                </div>
                            </div>
                            <span class="text-sm text-green-600">已处理</span>
                        </div>
                    </div>
                </div>

                <!-- 相关信访记录 -->
                <div>
                    <h4 class="font-semibold text-slate-800 mb-3">相关信访记录</h4>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead class="bg-slate-50">
                                <tr>
                                    <th class="text-left p-3 font-semibold text-slate-700">信访编号</th>
                                    <th class="text-left p-3 font-semibold text-slate-700">投诉内容</th>
                                    <th class="text-left p-3 font-semibold text-slate-700">区县</th>
                                    <th class="text-left p-3 font-semibold text-slate-700">街道</th>
                                    <th class="text-left p-3 font-semibold text-slate-700">回复内容</th>
                                    <th class="text-left p-3 font-semibold text-slate-700">重复次数</th>
                                    <th class="text-left p-3 font-semibold text-slate-700">操作</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-200">
                                <tr>
                                    <td class="p-3 font-medium text-indigo-600">#XF20240115001</td>
                                    <td class="p-3">工厂废气排放扰民</td>
                                    <td class="p-3">福田区</td>
                                    <td class="p-3">梅林街道</td>
                                    <td class="p-3">已派人调查处理</td>
                                    <td class="p-3">12次</td>
                                    <td class="p-3">
                                        <button class="text-indigo-600 hover:text-indigo-800">查看</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-3 font-medium text-indigo-600">#XF20240110045</td>
                                    <td class="p-3">空气污染问题</td>
                                    <td class="p-3">福田区</td>
                                    <td class="p-3">梅林街道</td>
                                    <td class="p-3">责令整改</td>
                                    <td class="p-3">8次</td>
                                    <td class="p-3">
                                        <button class="text-indigo-600 hover:text-indigo-800">查看</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 侧边栏折叠功能
        const sidebar = document.getElementById('sidebar');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const fadeTexts = document.querySelectorAll('.fade-text');

        sidebarToggle.addEventListener('click', () => {
            const isCollapsed = sidebar.classList.contains('sidebar-collapsed');

            sidebar.classList.toggle('sidebar-collapsed');
            sidebar.classList.toggle('sidebar-expanded');

            setTimeout(() => {
                fadeTexts.forEach(text => {
                    if (sidebar.classList.contains('sidebar-collapsed')) {
                        text.classList.add('hidden');
                    } else {
                        text.classList.remove('hidden');
                    }
                });
            }, isCollapsed ? 0 : 200);
        });

        // 用户菜单
        const userMenuBtn = document.getElementById('userMenuBtn');
        const userMenu = document.getElementById('userMenu');

        userMenuBtn.addEventListener('click', () => {
            userMenu.classList.toggle('hidden');
        });

        // 点击外部关闭菜单
        document.addEventListener('click', (e) => {
            if (!userMenuBtn.contains(e.target) && !userMenu.contains(e.target)) {
                userMenu.classList.add('hidden');
            }
        });

        // 分析类型切换
        const analysisTypes = document.querySelectorAll('.analysis-type');
        const issuesList = document.getElementById('issuesList');

        analysisTypes.forEach(btn => {
            btn.addEventListener('click', () => {
                analysisTypes.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');

                // 显示/隐藏对应的问题记录
                const type = btn.textContent.includes('重复投诉') ? 'repeat' : 'pollution';
                const cards = issuesList.querySelectorAll('.issue-card');
                
                cards.forEach(card => {
                    if (card.dataset.type === type) {
                        card.classList.remove('hidden');
                    } else {
                        card.classList.add('hidden');
                    }
                });

                // 更新图表
                updateChart(type);
            });
        });

        // 图表配置
        const issuesCtx = document.getElementById('issuesChart').getContext('2d');
        let issuesChart;

        function initChart() {
            issuesChart = new Chart(issuesCtx, {
                type: 'bar',
                data: {
                    labels: ['福田区', '罗湖区', '南山区', '宝安区', '龙岗区', '盐田区'],
                    datasets: [{
                        label: '重复投诉次数',
                        data: [12, 8, 5, 15, 7, 3],
                        backgroundColor: 'rgba(239, 68, 68, 0.8)',
                        borderColor: 'rgb(239, 68, 68)',
                        borderWidth: 2,
                        borderRadius: 8,
                        borderSkipped: false,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                usePointStyle: true,
                                padding: 20
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            borderColor: '#fff',
                            borderWidth: 1,
                            cornerRadius: 8
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        }

        function updateChart(type) {
            if (!issuesChart) {
                initChart();
                return;
            }

            if (type === 'repeat') {
                issuesChart.data.datasets[0].label = '重复投诉次数';
                issuesChart.data.datasets[0].data = [12, 8, 5, 15, 7, 3];
                issuesChart.data.datasets[0].backgroundColor = 'rgba(239, 68, 68, 0.8)';
                issuesChart.data.datasets[0].borderColor = 'rgb(239, 68, 68)';
            } else {
                issuesChart.data.datasets[0].label = '污染问题数量';
                issuesChart.data.datasets[0].data = [23, 18, 31, 28, 22, 12];
                issuesChart.data.datasets[0].backgroundColor = 'rgba(59, 130, 246, 0.8)';
                issuesChart.data.datasets[0].borderColor = 'rgb(59, 130, 246)';
            }
            
            issuesChart.update();
        }

        // 初始化图表
        initChart();

        // 模态框控制
        const detailsModal = document.getElementById('detailsModal');
        const closeModal = document.getElementById('closeModal');
        const viewDetailsBtns = document.querySelectorAll('.view-details');

        viewDetailsBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                detailsModal.classList.remove('hide');
                detailsModal.classList.add('show');
            });
        });

        closeModal.addEventListener('click', () => {
            detailsModal.classList.remove('show');
            detailsModal.classList.add('hide');
        });

        // 点击模态框外部关闭
        detailsModal.addEventListener('click', (e) => {
            if (e.target === detailsModal) {
                detailsModal.classList.remove('show');
                detailsModal.classList.add('hide');
            }
        });
    </script>
</body>
</html>